import React, { FC,useState,useEffect} from 'react';
import { Text, View,Button,Image,usePageEvent,share,getImageInfo  } from '@ray-js/ray';
import styles from './index.module.less';
import share_img from '../../assets/images/tab/share.png'
import Welcome from '../../assets/images/tab/welcome.gif'
import save from '../../assets/images/tab/save.png'
import wechat from '../../assets/images/tab/wechat.png'
import FriendCircle from '../../assets/images/tab/FriendCircle.png'
import CloseImg from '../../assets/images/tab/close.png'
import logo from '../../assets/images/tab/logo.png'
import {Lunar} from 'lunar-javascript'

export default function FirstRenamePopup(props){
      const [ShowGif,setShowGif]=useState(props.fireworks);
      const [ShareBtn,setShareBtn]=useState(true);

      useEffect(() => {
        const timer = setTimeout(() => {
          setShowGif(false);
        }, 3000);
    
        return () => clearTimeout(timer);
      }, []);


      const close=()=>{
        props.onClose();
      }
      
      const today = new Date(); 
      const lunar = Lunar.fromDate(new Date());
      //设置天数
      const Day=today.getDate();
      //设置月份
      const chineseMonths = ["一月", "二月", "三月", "四月", "五月", "六月","七月", "八月", "九月", "十月", "十一月", "十二月"];
      const Month=chineseMonths[today.getMonth()];
      //设置星期几
      const Weeks = ['日','一','二','三','四','五','六'];
      const Week= Weeks[today.getDay()];
      //设置农历月份
      const LunarMonth=lunar.getMonthInChinese();
      //设置农历日
      const LunarDay=lunar.getDayInChinese();
      //设置农历字样
      const [LunarDate,setLunarDate]=useState('');
      useEffect(() => {
        if (lunar.getFestivals().length !== 0) {
          setLunarDate(lunar.getFestivals()[0]);
        } else if (lunar.getJieQi()) { // 注意：getJieQi() 返回的是字符串或null，没有length属性
          setLunarDate(lunar.getJieQi());
        } else {
          setLunarDate(`农历 ${LunarMonth}月 ${LunarDay}`);
        }
      }, []);

      //设置分享按钮是否存在
      const [Share_containerExist,setShare_containerExist]=useState(false);
      const OpenShare=()=>{
        setShare_containerExist(true);
        setShareBtn(false);
      }

      //保存卡片到手机本地
      const Save=()=>{
        ty.snapshot({
          selector: '#card',  // 截取 id 为 snapshot_1 的元素
          success: function (res1) {
            console.log('ty.snapshot', res1);
            const {tempImagePath} = res1;
            console.log('tempImagePath', tempImagePath);
            ty.showModal({
              title: '保存到相册?',
              content: '是否将截图保存到相册?',
              cancelText:'取消',
              confirmText:'确定',
              success({confirm}) {
                if (confirm) {
                  ty.authorize({
                    scope: 'scope.writePhotosAlbum', //  保存到相册权限
                    success() {
                      ty.saveImageToPhotosAlbum({ // 保存到相册
                        filePath: tempImagePath,
                        success(res4) {
                          console.log('saveImageToPhotosAlbum', res4);
                          ty.showToast({
                            title: '保存成功',
                          });
                        },
                        fail(res5) {
                          ty.showToast({
                            title: '保存失败',
                          });
                          console.log('saveImageToPhotosAlbum', res5);
                        },
                      });
                    },
                    fail(err) {
                      console.log(err);
                      ty.showToast({
                        title: '授权失败',
                      });
                    },
                  });
                }
              },
            });
          },
          fail: function (res) {
            console.log('ty.snapshot', res);
          },
        });
      }

    //转发卡片给微信好友
    const ShareToWechatCircleFriend=()=>{
      ty.snapshot({
        selector: '#card',  // 截取 id 为 card 的元素
        success: function (res1) {
          const {tempImagePath} = res1;
          console.log('图片路径',tempImagePath)
          share({
            type: 'WeChat',
            title: '分享图片',
            message: '测试的图',
            imagePath: tempImagePath,
            contentType: 'image',
            success: (res) => {
              console.log('分享成功', res);
            },
            fail:(res)=>{
              console.log('分享失败',res)
            }
          });
        },
        fail(res){
          console.log('截图失败',res)
        }
      })
    }

    const ShareToWechatFriend=()=>{
      ty.snapshot({
        selector: '#card',  // 截取 id 为 snapshot_1 的元素
        success: function (res1) {
          const {tempImagePath} = res1;
          console.log('tempImagePath', tempImagePath);
          getImageInfo({
            src:tempImagePath as unknown as string,
            success(res2:any) {
              console.log('res2', res2);
              const resolvedPath = (res2 && (res2.path || res2.tempFilePath)) || tempImagePath;
              console.log('resolvedPath',resolvedPath)
              share({
                type: 'WeChat',
                title: '分享图片',
                message: '测试的图',
                imagePath: resolvedPath,
                contentType: 'image',
                success: (res) => {
                  console.log('Share success:', res);
                },
                fail(res) {
                  console.log('Share failed:', res);
                }
              });
            },
            fail(res3) {
              console.log('res3', res3);
            }
          })
        },
      })
    }


    return (
        <>
          <View className={styles.bg}>
            <View className={styles.container} style={{background: `linear-gradient(to bottom, ${props.color1}, ${props.color2})`}} id='card'>

              <View className={styles.FirstLineContainer}>
                  <Text className={styles.MonthFont}>{Month}</Text>
                  <Text className={styles.Lunar}>{LunarDate}</Text>
                  <Text className={styles.WeekFont}>星期{Week}</Text>
              </View>

              <View className={styles.ContentContainer}>
                <Text className={styles.DayFont}>{Day}</Text>
                <Text className={styles.content2}>今日宜\u00A0•\u00A0{props.text2}</Text>
                <Text className={styles.content}>{props.text1}</Text>
            </View>

              {/* <Text className={styles.ColorFont}>11中国传统色 群青x远山11111</Text> */}
                { !ShowGif && ShareBtn &&
                <View className={styles.shareContainer}>
                  <Button className={styles.Share_btn} onClick={OpenShare}>
                    <Image src={share_img} className={styles.Share_img}></Image>
                  </Button>
                  <Text className={styles.ShareFont}>分享给朋友</Text>
              </View>
              }

              {Share_containerExist &&
                <View className={styles.GoodLuckContainer}>
                  <Image src={logo} className={styles.LogoImg}></Image>
                  <Text className={styles.GoodLuckContainerFont}>好运日签\u00A0•\u00A0超级球球</Text>
                </View>
              }
            </View>

            <View className={styles.CloseContainer}>
              { Share_containerExist &&
                  <View className={styles.shareContainer2}>
                    <View className={styles.SaveContainer}>
                      <Button className={styles.SaveBtn} onClick={Save}>
                        <Image className={styles.SaveImg} src={save}></Image>
                      </Button>
                      <Text className={styles.Font}>保存</Text>
                    </View>

                    <View className={styles.WeChatContainer}>
                      <Button className={styles.WechatBtn} onClick={ShareToWechatFriend}>
                        <Image className={styles.WechatImg} src={wechat}></Image>
                      </Button>
                      <Text className={styles.Font}>微信</Text>
                    </View>
                    
                    <View className={styles.FriendContainer}>
                      <Button className={styles.FriendBtn}>
                        <Image className={styles.FriendImg} src={FriendCircle} onClick={ShareToWechatCircleFriend}></Image>
                      </Button>
                      <Text className={styles.Font}>朋友圈</Text>
                    </View>
                  </View>}

              <Button className={styles.close_btn} onClick={close}>
                  <Image src={CloseImg} className={styles.close_img}></Image>
              </Button>
            </View>

            {/* { !ShowGif && ShareBtn &&
              <Button className={styles.Share_btn} onClick={OpenShare}>
              <Image src={share_img} className={styles.Share_img}></Image>
            </Button>} */}

            
            
            { ShowGif &&
              <Image src={Welcome} className={styles.Welcome_gif}></Image>}
          </View>
        </>
      );
}

